import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { ActivatedRoute } from '@angular/router';
//Base components
import { KeyIssuesModel } from '../../../shared/templates/keyIssues/keyIssues.model';
//Services
import { CompanyRiskService } from '../../companyRisk.service';

@Component({
    selector: 'mei-indicators',
    templateUrl: '../../../shared/templates/keyIssues/keyIssues.component.html',
    styleUrls: ['../../../shared/templates/keyIssues/keyIssues.component.css']
})
export class MeiIndicatorsComponent extends KeyIssuesModel {
    private sub: any;
    private fragSub: any;
    private scrolled: boolean = false;
    public companyId: string;
    public externalId: number;    
    public mei: {} = undefined;    

    constructor(
        private route: ActivatedRoute,
        private riskService: CompanyRiskService,
        private http: Http) {
        super(http);

        this.currentComponent = "meiIndicators";
        this.headerPercentWidth = 30;
        this.showLimit = false;
    }

    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            this.load();
        });

        this.fragSub = this.route.fragment.subscribe(fragment => {
            this.indicatorToExpand = fragment;
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
        this.fragSub.unsubscribe();
    }
    
    ngAfterContentChecked() {
        if(this.scrolled == false && this.indicatorToExpand){            
            let elem: HTMLElement = document.getElementById(this.indicatorToExpand);
            if(elem)
            {
                //wait for expand
                setTimeout(() => {
                    elem.scrollIntoView({behavior:"smooth"});
                    this.scrolled = true;    
                }, 500);                
            }
        }
    }  

    private load(): void {
        this.loaded = new Promise<void>((resolve, reject) => {
            this.riskService.company.then(company => {
                this.companyId = company.id;
                this.riskService.mei.then(mei => {
                    this.mei = mei;
                    this.externalId = mei.externalId;
                    this.meiType = mei.type;
                    this.columns = [
                        {
                            name: mei.type == 'BaselineIssue' ? 'Pillar Score' : 'Raw Score',
                            percentWidth: 20,
                            maxRating: 100,
                            valueField: 'score',
                            highlight: false,
                            chartColor: '#B3D4D1',
                            showRating: true,
                            boldRating: false,
                            showChart: true,
                            ratingUnit: '',
                            decimals: 0
                        },
                        {
                            name: 'Weight',
                            percentWidth: 20,
                            maxRating: 100,
                            valueField: 'weight',
                            highlight: false,
                            chartColor: '#B5B7B7',
                            showRating: true,
                            boldRating: false,
                            showChart: true,
                            ratingUnit: '%',
                            decimals: 2
                        },
                        {
                            name: 'Weighted Score',
                            percentWidth: 30,
                            maxRating: 100,
                            valueField: 'weightedScore',
                            highlight: false,
                            chartColor: 'black',
                            showRating: true,
                            boldRating: true,
                            showChart: true,
                            ratingUnit: '',
                            decimals: 1
                        }
                    ];

                    //format data for template
                    let indicators: any[] = []
                    mei.indicators.forEach(indicator => {
                        indicators.push({
                            name: indicator.name,
                            code: indicator.code,
                            indicatorType: indicator.indicatorType,
                            category: indicator.category,
                            score: { value: indicator.rawScore },
                            weight: { value: this.formatMeiWeight(indicator.weightInMei) },
                            weightedScore: { value: indicator.weightedScoreInMei || 0 },
                            isMain: true
                        });
                    });
                    this.elements = indicators;

                    resolve();
                });
            });
        })
    }
}